<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('项目应用列表')" />

	<style>
		#bootstrap-table tr{
			border: 1px solid #ddd;
		}
		#bootstrap-table th{
			border: 1px solid #ddd;
		}
		.counter{
			color: #ffffff;
			display: block;
			font-size: 24px;
			font-weight: 600;
		}
		.text-right-btn{
			height: 96px;
			text-align: right;
		}
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">

			<div class="btn-group-sm" role="group">
				<div class="btn btn-success col-md-2 col-sm-2 col-lg-3 text-right-btn" >
					<span class="counter">处理二维应用工作量百分比</span>
					[[${chulierweirate}]]
				</div>
				<div class="btn btn-primary  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter">处理三维应用工作量百分比</span>
					[[${chulisanweirate}]]
				</div>
				<div class="btn btn-danger  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter">解释二维应用工作量百分比</span>
					[[ ${jieshierweirate}]]
				</div>
				<div class="btn btn-warning  col-md-2 col-sm-2 col-lg-3 text-right-btn">
					<span class="counter">  解释三维应用工作量百分比</span>
					[[${jieshisanweirate}]]
				</div>
			</div>

	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="statistics:statisticsApplication:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<!--<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="statistics:statisticsApplication:edit">-->
					<!--<i class="fa fa-edit"></i> 修改-->
				<!--</a>-->
				<!--<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="statistics:statisticsApplication:remove">-->
					<!--<i class="fa fa-remove"></i> 删除-->
				<!--</a>-->
				<a class="btn btn-warning" onclick="$.table.importExcel('importForm')">
					<i class="fa fa-download"></i> 导入
				</a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>


			<div class="col-lg-12">
				<div class="panel panel-border panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">项目数统计柱状图</h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar" style="height: 300px;width:1000px" ></div>
					</div>
					<div class="panel-heading">
						<h3 class="panel-title">处理统计柱状图 </h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar1" style="height: 300px;width:1200px" ></div>
					</div>
					<div class="panel-heading">
						<h3 class="panel-title">解释统计柱状图 </h3>
					</div>
					<div class="panel-body" style="overflow:auto">
						<div id="echarts-bar2" style="height: 300px;width:1200px" ></div>
					</div>
				</div>
			</div> <!-- col -->
		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <script th:src="@{/js/echarts.common.min.js}"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('statistics:statisticsApplication:edit')}]];
        var removeFlag = [[${@permission.hasPermi('statistics:statisticsApplication:remove')}]];
        var prefix = ctx + "statistics/statisticsApplication";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                importUrl: prefix + "/importData",
                modalName: "项目应用",
		        showExport: true,
                columns: [
                    [
                        {field: "id", title: "id",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,visible: false},
                        {field: 'unit',title: "项目单位",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'type',title: "项目类型",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'manager',title: "项目组长",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d3Count", title: "三维项目数",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d3Area", title: "三维工作量",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d2Count", title: "二维项目数",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d2Area", title: "二维工作量",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {title: "全流程应用",valign:"middle", align:"center",colspan: 4, rowspan: 1 },
                        {field: "d3CountAccounting", title: "项目数占比(三维)",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d3AreaAccounting", title: "工作量占比(三维)",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d2CountAccounting", title: "项目数占比(二维)",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: "d2AreaAccounting", title: "工作量占比(二维)",valign:"middle", align:"center",colspan: 1, rowspan: 2 ,sortable: true},
                        {field: 'operate',title: "操作",valign:"middle", align:"center",colspan: 1, rowspan: 2,
                            formatter: function(value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-warning btn-xs " href="javascript:void(0)" onclick="$.operate.edit('+row.id+')">修改</a> ');
                                actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove('+row.id+')">删除</a> ');
                                return actions.join('');
                            }
                        },
                    ],
                    [
                        {field: "allD3Area", title: "三维(KM²)",valign:"middle", align:"center",sortable: true},
                        {field: "allD3Count", title: "三维项目数",valign:"middle", align:"center",sortable: true},
                        {field: "allD2Area", title: "二维(KM)",valign:"middle", align:"center",sortable: true},
                        {field: "allD2Count", title: "二维项目数",valign:"middle", align:"center",sortable: true},

                    ]
                ]
            };
            $.table.init(options);

            var tempArray=[[${chuli_counts}]];
            var teampArray2=[[${jieshi_counts}]];
            var teampArray3=[[${chuli_erwei_counts}]];
            var teampArray4=[[${chuli_sanwei_counts}]];
            var teampArray5=[[${jieshi_erwei_counts}]];
            var teampArray6=[[${jieshi_sanwei_counts}]];
            var dataArray=tempArray.split(',');
            var dataArray2=teampArray2.split(',');
            var dataArray3=teampArray3.split(',');
            var dataArray4=teampArray4.split(',');
            var dataArray5=teampArray5.split(',');
            var dataArray6=teampArray6.split(',');

            var myChart = echarts.init(document.getElementById('echarts-bar'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                grid : {
                    left : 40,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['处理项目数(个)','解释项目数(个)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","冀东","大港","华北","吉林","西南","塔里木","新疆","青海","吐哈","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [{
                    barWidth : 15,
                    name: '处理项目数(个)',
                    type: 'bar',
                    data: dataArray,
                    itemStyle:{
                        normal:{
                            color:'#74aadd'
                        }
                    },
                },
                    {
                        barWidth : 15,
                        name: '解释项目数(个)',
                        type: 'bar',
                        data: dataArray2,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }
                ],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            var myChart1 = echarts.init(document.getElementById('echarts-bar1'));
            // 指定图表的配置项和数据
            var option1 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 80,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['处理二维(KM)','处理三维(KM²)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","冀东","大港","华北","吉林","西南","塔里木","新疆","青海","吐哈","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [{
                    name: '处理二维(KM)',
                    type: 'bar',
                    data: dataArray3,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                },
                    {
                        name: '处理三维(KM²)',
                        type: 'bar',
                        data: dataArray4,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
            var myChart2 = echarts.init(document.getElementById('echarts-bar2'));
            var option2 = {
                title: {
                    text: ''
                },
                grid : {
                    left : 80,
                    right: 30,
                    bottom:65
                },
                tooltip: {},
                legend: {
                    data:['解释二维(KM)','解释三维(KM²)']
                },
                xAxis: {
                    data: ["大庆","辽河","长庆","冀东","大港","华北","吉林","西南","塔里木","新疆","青海","吐哈","玉门","浙江","煤层气","南方公司","勘探开发院","勘探院西北分院","杭州地质研究院"],
                    axisLabel: {
                        interval:0,
                        rotate:40
                    } ,
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{formatter:'{value}'}
                },
                series: [{
                    name: '解释二维(KM)',
                    type: 'bar',
                    data: dataArray5,
                    itemStyle:{
                        normal:{
                            color:'#3c78b0'
                        }
                    },
                },
                    {
                        name: '解释三维(KM²)',
                        type: 'bar',
                        data: dataArray6,
                        itemStyle:{
                            normal:{
                                color:'#e04c4c'
                            }
                        },
                    }],
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'black'
                        }
                    }
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
        });
    </script>
	 <form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
		 <div class="col-xs-offset-1">
			 <input type="file" id="file" name="file"/>
			 <div class="mt10 pt5">
				 <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的问题数据
				 &nbsp;	<a href="http://211.149.205.33:18080/file/down/191128173713674" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
			 </div>
			 <font color="red" class="pull-left mt10">
				 提示：仅允许导入“xls”或“xlsx”格式文件！
			 </font>
		 </div>
	 </form>
</body>
</html>